<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="site_name" label="站点名称"> </el-table-column>
      <el-table-column prop="warning_reason" label="预警原因">
      </el-table-column>
      <el-table-column prop="warning_time" label="预警发生时间">
      </el-table-column>
      <el-table-column prop="warning_mail_time" label="预警最新发送邮件时间">
      </el-table-column>
      <el-table-column prop="warning_status" label="预警状态">
        <template slot-scope="scope">
          <el-button
            size="medium"
            v-if="scope.row.warning_status !== ''"
            :type="
              scope.row.warning_status === '运行正常' ? 'success' : 'danger'
            "
          >
            {{ scope.row.warning_status }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="process" label="操作">
        <template slot-scope="scope">
          <el-button
            size="medium"
            v-if="scope.row.process !== ''"
            :type="scope.row.process === '运行正常' ? 'success' : 'danger'"
          >
            {{ scope.row.process }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <!-- <el-col :span="10"> -->
      <el-pagination background layout="prev, pager, next, jumper" :total="20">
      </el-pagination>
      <!-- </el-col> -->
    </el-row>
  </div>
</template>

<script>
export default {
  name: "WaterQualityAndQuantity",
  data() {
    return {
      tableData: [
        {
          site_name: "SZSL-01",
          warning_reason: "暂无数据",
          warning_time: "暂无数据",
          warning_mail_time: "暂无数据",
          warning_status: "",
          process: "",
        },
        // {
        //   site_name: 'SZSL-02',
        //   warning_reason:'',
        //   warning_time:'',
        //   warning_mail_time:'',
        //   warning_status:'运行正常',
        //   process:'',
        // },
        // {
        //   site_name: 'SZSL-03',
        //   warning_reason:'',
        //   warning_time:'',
        //   warning_mail_time:'',
        //   warning_status:'运行正常',
        //   process:'',
        // },
        // {
        //   site_name: 'SZSL-04',
        //   warning_reason:'',
        //   warning_time:'',
        //   warning_mail_time:'',
        //   warning_status:'运行正常',
        //   process:'',
        // },
        // {
        //   site_name: 'SZSL-05',
        //   warning_reason:'超出阈值',
        //   warning_time:'2020-07-12 17:00:01',
        //   warning_mail_time:'2020-09-22 22:55:21',
        //   warning_status:'设备预警',
        //   process:'点击处理',
        // },
        // {
        //   site_name: 'SZSL-06',
        //   warning_reason:'',
        //   warning_time:'',
        //   warning_mail_time:'',
        //   warning_status:'运行正常',
        //   process:'',
        // },
        // {
        //   site_name: 'SZSL-07',
        //   warning_reason:'超出阈值',
        //   warning_time:'2020-09-23 07：25：04',
        //   warning_mail_time:'2020-09-23 07:25:04',
        //   warning_status:'设备预警',
        //   process:'点击处理',
        // },
        // {
        //   site_name: 'SZSL-08',
        //   warning_reason:'',
        //   warning_time:'',
        //   warning_mail_time:'',
        //   warning_status:'运行正常',
        //   process:'',
        // },
      ],
    };
  },
};
</script>

<style scoped>
.content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 87vh;
  margin-right: 5px;
}
</style>